<template>
    <div class="detail">
        <div class="top">
            <h1>{{ useDetailStore.hospitaldetailinfo?.hospital?.hosname }}</h1>
            <div class="level">
                <svg t="1706233173220" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="12482" width="16" height="16">
                    <path
                        d="M190.193225 471.411583c14.446014 0 26.139334-11.718903 26.139334-26.13831 0-14.44499-11.69332-26.164916-26.139334-26.164916-0.271176 0-0.490164 0.149403-0.73678 0.149403l-62.496379 0.146333c-1.425466-0.195451-2.90005-0.295735-4.373611-0.295735-19.677155 0-35.621289 16.141632-35.621289 36.114522L86.622358 888.550075c0 19.949354 15.96767 35.597753 35.670407 35.597753 1.916653 0 3.808746 0.292666 5.649674 0l61.022819 0.022513c0.099261 0 0.148379 0.048095 0.24764 0.048095 0.097214 0 0.146333-0.048095 0.24457-0.048095l0.73678 0 0-0.148379c13.413498-0.540306 24.174586-11.422144 24.174586-24.960485 0-13.55983-10.760065-24.441669-24.174586-24.981974l0-0.393973-50.949392 0 1.450025-402.275993L190.193225 471.409536z"
                        fill="#ff0000" p-id="12483"></path>
                    <path
                        d="M926.52241 433.948343c-19.283182-31.445176-47.339168-44.172035-81.289398-45.546336-1.77032-0.246617-3.536546-0.39295-5.380544-0.39295l-205.447139-0.688685c13.462616-39.059598 22.698978-85.58933 22.698978-129.317251 0-28.349675-3.193739-55.962569-9.041934-82.542948l-0.490164 0.049119c-10.638291-46.578852-51.736315-81.31498-100.966553-81.31498-57.264215 0-95.466282 48.15065-95.466282 106.126063 0 3.241834-0.294712 6.387477 0 9.532097-2.996241 108.386546-91.240027 195.548698-196.23636 207.513194l0 54.881958-0.785899 222.227314 0 229.744521 10.709923 0 500.025271 0.222057 8.746198-0.243547c19.35686 0.049119 30.239721-4.817726 47.803749-16.116049 16.682961-10.761088 29.236881-25.50079 37.490869-42.156122 2.260483-3.341095 4.028757-7.075139 5.106298-11.20111l77.018118-344.324116c1.056052-4.053316 1.348718-8.181333 1.056052-12.160971C943.643346 476.446249 938.781618 453.944769 926.52241 433.948343zM893.82573 486.837924l-82.983993 367.783411-0.099261-0.049119c-2.555196 6.141884-6.879688 11.596106-12.872169 15.427364-4.177136 2.727111-8.773827 4.351098-13.414521 4.964058-1.49812-0.195451-3.046383 0-4.620227 0l-477.028511-0.540306-0.171915-407.408897c89.323375-40.266076 154.841577-79.670527 188.596356-173.661202 0.072655 0.024559 0.124843 0.049119 0.195451 0.072655 2.99931-9.137101 6.313799-20.73423 8.697079-33.164331 5.551436-29.185716 5.258771-58.123792 5.258771-58.123792-4.937452-37.98001 25.940812-52.965306 44.364417-52.965306 25.304316 0.860601 50.263777 33.656541 50.263777 52.326762 0 0 5.600555 27.563776 5.649674 57.190537 0.048095 37.366026-4.6673 56.847729-4.6673 56.847729l-0.466628 0c-5.872754 30.879288-16.214287 60.138682-30.464849 86.964654l0.36839 0.342808c-2.358721 4.815679-3.709485 10.220782-3.709485 15.943111 0 19.922748 19.088754 21.742187 38.765909 21.742187l238.761895 0.270153c0 0 14.666024 0.465604 14.690584 0.465604l0 0.100284c12.132318-0.638543 24.221658 5.207605 31.100322 16.409738 5.504364 9.016351 6.437619 19.6045 3.486404 28.988218L893.82573 486.837924z"
                        fill="#ff0000" p-id="12484"></path>
                    <path
                        d="M264.827039 924.31872c0.319272 0.024559 0.441045 0.024559 0.295735-0.024559 0.243547-0.048095 0.367367-0.074701-0.295735-0.074701s-0.539282 0.026606-0.271176 0.074701C264.43409 924.343279 264.532327 924.343279 264.827039 924.31872z"
                        fill="#ff0000" p-id="12485"></path>
                </svg>
                <p>{{ useDetailStore.hospitaldetailinfo.hospital?.param?.hostypeString }}</p>
            </div>
        </div>
        <div class="logo">
            <div class="left">
                <img src="@/assets/images/logo.png" alt="">
            </div>
            <div class="right">
                <div class="pos">
                    <svg t="1706233825123" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="13815" width="16" height="16">
                        <path
                            d="M856.954985 385.981888c-0.576121 51.994188-17.180288 99.533924-39.609113 145.413857-33.606399 68.75185-78.228689 130.188084-126.728286 188.95349-45.148269 54.706973-93.597725 106.356306-145.30948 154.923442-18.070564 16.966417-34.56012 17.48728-53.085032 0.859577-95.919607-86.087681-182.122921-180.470281-247.924579-292.121174-10.708899-18.169825-20.417005-36.901445-28.77844-56.283888-7.924483-18.371416-1.090844-37.588083 16.018835-45.521776 17.158798-7.957229 36.875862-0.977257 45.222971 17.178241 39.327704 85.524862 96.852862 158.196998 159.714562 227.119741 24.238031 26.575262 49.630351 52.033074 75.916017 76.598562 3.251044 3.035126 5.296633 5.501294 9.914814 0.850367 87.10894-87.772043 168.662351-179.933045 228.0356-289.487184 17.307178-31.93534 31.737842-65.306378 36.57194-101.670587 7.284917-54.81749-3.724835-106.969267-29.730115-155.072845-49.526997-91.616604-126.402875-143.862525-231.327576-147.546428-119.527281-4.194532-225.729068 72.993454-263.348873 186.984648-9.450233 28.636201-14.455223 57.984622-14.845103 88.142479-0.278339 21.561062-14.415314 36.784788-33.901111 36.734646-19.547195-0.047072-33.82027-15.626909-33.762965-36.842093 0.442068-160.357198 110.895693-299.273061 266.558985-335.243297C575.346235 20.187785 713.3094 73.709769 791.261797 183.556573 834.320475 244.230444 855.712691 311.864844 856.954985 385.981888zM136.976186 921.538397c254.766404 0 508.070504 0 761.591545 0-0.037862-4.378727-2.922563-7.237845-4.750187-10.443863-33.05279-58.048067-66.178235-116.059296-99.363032-174.032662-7.121188-12.438287-7.562233-24.825408 0.360204-36.855396 7.136537-10.840906 17.59882-16.087397 30.610158-15.196097 11.692297 0.806365 20.893866 6.54916 26.681686 16.642029 45.293579 79.001285 90.644463 157.970848 135.468344 237.237169 13.837146 24.473391-3.272533 50.588165-32.371268 50.595328-151.58644 0.050142-303.172881 0.023536-454.755228 0.023536-138.542356 0-277.091876-0.693802-415.621952 0.533143-31.091112 0.277316-50.15326-28.113291-33.062-56.870242 44.724621-75.246775 87.2389-151.807475 130.681318-227.818659 9.356089-16.367783 23.981181-23.556509 39.297005-19.578917 22.651906 5.892197 32.509415 29.940916 20.503986 51.17452-23.185049 41.015136-46.706765 81.84096-70.065775 122.756835C160.695401 879.824343 149.256884 899.965056 136.976186 921.538397zM653.782655 380.311749c0.008186 74.774007-61.005422 135.555325-135.90632 135.38648-74.259284-0.165776-134.827755-60.983933-134.825708-135.37727 0.004093-74.859965 60.867276-135.492904 135.870504-135.352711C593.176322 245.105371 653.776516 305.924551 653.782655 380.311749zM518.829034 312.651766c-37.586037 0.010233-68.025303 30.203906-68.087725 67.536162-0.062422 37.753859 30.839379 68.179822 68.88488 67.822688 36.531008-0.342808 66.62849-31.17707 66.470901-68.095911C585.939501 343.05624 555.526841 312.64358 518.829034 312.651766z"
                            fill="#272636" p-id="13816"></path>
                    </svg>
                    <div>
                        <span>具体位置：</span>
                        <p> {{ useDetailStore.hospitaldetailinfo?.hospital?.param?.fullAddress }}</p>
                    </div>
                </div>
                <p class="rout">
                    规划路线：{{ useDetailStore.hospitaldetailinfo?.hospital?.route }}
                </p>
            </div>
        </div>
        <div class="footer">
            <h1>医院介绍</h1>
            <p>
                {{ useDetailStore.hospitaldetailinfo.hospital?.intro }}
            </p>
        </div>
    </div>
</template>

<script setup lang="ts">
import useHospitalDetailStore from '@/store/modules/hospitaldetail';
const useDetailStore = useHospitalDetailStore() 
</script>

<style lang="scss" scoped>
.top {
    display: flex;
    flex-direction: row;
    align-items: center;

    .level {
        margin-top: 2px;
        margin-left: 10px;
        display: flex;

        p {
            margin-left: 5px;
            color: #7f7f7f;
        }
    }

    h1 {
        font-size: 30px;
        font-weight: 900;
    }
}

.logo {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;

    .left {
        img {
            width: 80px;
            height: 80px;
        }
    }

    .right {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        color: #7f7f7f;

        .pos {
            display: flex;
            flex-direction: row;

            div {
                margin-left: 5px;
                display: flex;
            }
        }

        .rout {
            margin-top: 10px;
            line-height: 1.2rem;
        }
    }
}

.footer {
    color: #7f7f7f;

    h1 {
        margin: 15px 0px;
    }

    p {
        line-height: 30px;
    }

}
</style>